<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
    <title>文件上传</title>
</head>
<body>

    <h3>文件上传：</h3>
    选择一个文件上传: <br />
    <form action="http://39.108.134.162/upload/up" method="post" enctype="multipart/form-data">
        user:<input type="text" name="id" />
        <br />
        password:<input type="text" name="password" />
        <br />
        <input type="file" name="content" />
        <br />
        <input type="submit" value="上传文件" />
    </form>

    <br /><br /><br /><br />

    <input type="file" name="avatar" id="fileUploader">
    <button onclick="uploadFile()">上传</button>

    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script>
		function uploadFile () {
			var formData = new FormData();
			var file = document.getElementById('fileUploader').files[0];
			// 这里指定name值，input指定的name不起作用
			formData.append('avatar', file);
			formData.append('id', 'a@a.com');
			formData.append('password', '123');
			$.ajax({
				url        : 'http://39.108.134.162/upload/up',
				type       : 'post',
				data       : formData,
				// processData 默认true，会将data转化为string传输，这里必须设置为false
				processData: false,
				// contentType 默认'application/x-www-form-urlencoded; charset=UTF-8'
				// 这里不要设置为multipart/form-data，会丢失部分信息，设置为false，会自动识别contentType
				contentType: false,
				success    : function (res) {
					console.log(res);
					alert(JSON.stringify(res));
				},
			})
		}
    </script>

</body>
</html>
